<template>
  <a-config-provider :theme="themeConfig">
    <a-select
      v-model:value="themeName"
      @change="setThemeName(themeName)"
      style="width: 240px"
    >
      <a-select-option disabled value="">请选择主题</a-select-option>
      <!-- 初始选项 -->
      <a-select-option
        v-for="(color, name) in themeVariables"
        :key="name"
        :value="name"
      >
        {{ name }}: {{ color }}
      </a-select-option>
    </a-select>
    <a-button-group>
      <a-button @click="toggleDarkMode()">
        切换模式 {{ darkModeComp }}
      </a-button>
    </a-button-group>
  </a-config-provider>
</template>

<script lang="ts">
import { defineComponent, computed, ref, onMounted } from "vue";
import { useStore } from "vuex";
import variables from "@/assets/styles/variables.module.scss";
import { ConfigProvider, Select, Button } from "ant-design-vue";
import { setMode, setTheme } from "@/modules/theme"; // 导入 theme.ts 中的函数

export default defineComponent({
  name: "ThemeSwitcher",
  components: {
    "a-config-provider": ConfigProvider,
    "a-select": Select,
    "a-select-option": Select.Option,
    "a-button": Button,
    "a-button-group": Button.Group, // 注册按钮组
  },
  setup() {
    const store = useStore();

    const themeVariables = variables; // 直接使用导入的变量

    const themeName = ref<
      "red" | "orange" | "yellow" | "cyan" | "green" | "blue" | "purple"
    >("blue"); // 主题名称
    const darkMode = ref<"light" | "dark">("light"); // 颜色模式
    const darkModeComp = computed(
      () => store.getters["themeStore/darkModeComp"]
    );
    const themeConfig = computed(() => store.getters["themeStore/themeConfig"]);

    // 从 store 中获取主题名称
    // themeName.value = store.getters['themeStore/themeName'] || ''; // 确保有值

    console.log(
      "当前主题名称:",
      themeName.value,
      store.getters["themeStore/getCurrentColorName"]
    );
    console.log("当前颜色模式:", darkMode.value, darkModeComp.value);
    console.log(store.state);
    // 使用 onMounted 钩子
    onMounted(() => {
      // 从 localStorage 获取主题名称和颜色模式
      // const storedThemeName = localStorage.getItem("themeName") as "red" | "orange" | "yellow" | "cyan" | "green" | "blue" | "purple";
      const storedDarkMode = localStorage.getItem("darkMode") as
        | "light"
        | "dark";
      // 设置颜色模式
      if (storedDarkMode === "dark") {
        darkMode.value = storedDarkMode; // 保存到 store
        // setTimeout(() => {toggleDarkMode();
        // }, 0); // 延迟切换模式，避免闪烁
        toggleDarkMode("dark");
        setTimeout(() => {
          toggleDarkMode("dark");
          // toggleDarkMode();
        }, 0); // 延迟切换模式，避免闪烁
      } else {
        darkMode.value = "light"; // 默认设置为 light
        setTimeout(() => {
          toggleDarkMode("light");
          // toggleDarkMode();
        }, 0); // 延迟切换模式，避免闪烁
      }
      // 从 store 中获取主题名称并设置
      let storedThemeName = store.getters["themeStore/themeName"];
      if (!storedThemeName) {
        if (localStorage.getItem("themeName")) {
          storedThemeName = localStorage.getItem("themeName") as
            | "red"
            | "orange"
            | "yellow"
            | "cyan"
            | "green"
            | "blue"
            | "purple";
          setThemeName(storedThemeName); // 保存到 store
        }
      }
      themeName.value = storedThemeName || ""; // 确保有值
      darkMode.value = darkModeComp.value; // 从 store 中获取颜色模式
      console.log("组件已挂载，当前主题名称:", themeName.value);
      console.log("当前颜色模式:", darkMode.value);
    });
    // 切换主题
    const setThemeName = (
      name: "red" | "orange" | "yellow" | "cyan" | "green" | "blue" | "purple"
    ) => {
      console.log("切换主题", name);
      themeName.value = name;
      setTheme(name); // 使用 setTheme 更新主题
      localStorage.setItem("themeName", name); // 保存到 localStorage
      store.commit("themeStore/setThemeName", name);
    };

    // 切换亮暗模式
    const toggleDarkMode = (mode?: "light" | "dark") => {
      if (mode) {
        // 如果传入了参数，直接设置
        darkMode.value = mode; // 更新本地状态
        setMode(mode); // 更新模式
        store.commit("themeStore/toggleDarkMode", mode); // 将模式作为参数传递给 Vuex
        localStorage.setItem("darkMode", mode); // 保存到 localStorage
      } else {
        // 如果没有传入参数，切换模式
        const newMode = darkModeComp.value === "light" ? "dark" : "light"; // 根据当前状态确定新模式
        darkMode.value = newMode; // 更新本地状态
        setMode(newMode); // 更新模式
        store.commit("themeStore/toggleDarkMode", newMode); // 将模式作为参数传递给 Vuex
        localStorage.setItem("darkMode", newMode); // 保存到 localStorage
      }
    };

    return {
      themeName,
      darkMode,
      darkModeComp,
      themeConfig,
      setThemeName,
      toggleDarkMode,
      themeVariables,
    };
  },
});
</script>

<style scoped>
/* 这里可以添加样式 */
</style>
